<template>
  <div class="container">
    <section class="form-list">
      <header class="list-header">
        <h3>我的表单</h3>
        <div class="operate-div">
          <el-button>新建文件夹</el-button>
          <el-button type="primary">新建表单</el-button>
          <div class="forms-show">
            <span @click="showForm = 'FormShowType1'">
              <i :class="['iconfont', 'icon-viewgallery', {'active': showForm === 'FormShowType1'}]"></i>
            </span>
            <span class="line"></span>
            <span @click="showForm = 'FormShowType2'">
              <i :class="['iconfont', 'icon-category', {'active': showForm === 'FormShowType2'}]"></i>
            </span>
          </div>
        </div>
      </header>
      <main class="list-wrapper">
        <keep-alive>
          <component :is="showForm" test="test"></component>
        </keep-alive>
      </main>
    </section>
  </div>
</template>

<script>
import FormShowType1 from './formShowType1'
import FormShowType2 from './formShowType2'
export default {
  data () {
    return {
      showForm: 'FormShowType1'
    }
  },
  components: {
    FormShowType2,
    FormShowType1
  }
}
</script>

<style lang="less" scoped>
@import url('../../assets/less/folders/folders.less');
</style>
